<template>
    <section class="collect_server_from">
  			<el-form ref="form" :model="collectServerFrom" label-width="106px" >
  			  <el-form-item label="服务名称 " required>
			    <el-input v-model="form.name"></el-input>
			  </el-form-item>
			  
			  <el-form-item label="服务标识 ">
			    <span>由系统自动生成</span>
			  </el-form-item>
			  
			  
			 <el-form-item label="资源所在网段">
			    	<el-radio-group v-model="form.segmentId" @change ="chooseResource" >
				      <el-radio v-for="(item,index) in treeSeach.segment" :label="item.id" :value="item">{{item.name}}</el-radio>
				    </el-radio-group>
    		</el-form-item>
			  
			<el-form-item label="服务类型 " required>
				<el-radio-group v-model="form.type">
			      <el-radio label="1" @change="fuwuTypeFileButton=false">标准服务</el-radio>
			      <el-radio label="2" @change="fuwuTypeFileButton=true">个性化服务</el-radio>
			    </el-radio-group>
			     <input type="file" name="fuwuTypeFile" id="fuwuTypeFile" value="" style="display: none;"/>
			    <el-button type="primary" 
			    	style="float: right;"
			    	 @click="upload('fuwuTypeFile')" 
			    	 v-show="fuwuTypeFileButton"
			    	 >上传JAR包</el-button>
			  </el-form-item>
				
				
				<!--业务类型，信息类型多选-->
				 <yw-info-desc-form 
			 	 :yewuType="treeSeach.business_type"
			 	 :infoType="treeSeach.info_type"
			 	 :timeSubmit="ywInfoDescTimeOut"
			 	 @outPutForm = "ywInfoDescOutPutForm"
			 	 ></yw-info-desc-form>
				
				<el-form-item label="运行计划">
					<el-radio-group v-model="collectServerFrom.yunxingPlane" @change="changeYunxingPlane">
					  <el-radio-button class="box-radio" label="1">分钟</el-radio-button>
				      <el-radio-button class="box-radio" label="2">小时</el-radio-button>
				      <el-radio-button class="box-radio"  label="3">日</el-radio-button>
				      <el-radio-button class="box-radio"  label="4">周</el-radio-button>
				      <el-radio-button class="box-radio"  label="5">月</el-radio-button>
				    </el-radio-group>
				</el-form-item>
				
				<yunxing-plane 
					@outPutForm = "yunxingPlaneOutPutForm"
					:timeSubmit = "yunxingPlaneTimeOut" 
					:showYunxingPlane="showYunxingPlane"></yunxing-plane><!--运行计划-->
				
				
				<el-form-item label="异常处理">
				   <el-radio v-model="form.isRestart" label="1">自动重启</el-radio>
				</el-form-item>
				
				<el-form-item label="发布区域(单选)">
					<el-radio-group v-model="form.nodeIds" @change="changefbArea">
				      <el-radio-button class="box-radio" label="wenjian" v-for="(item,index) in fabuAreaRadio" :label="index" :name = "item.name" >{{item.name}}</el-radio-button>
				    </el-radio-group>
				    
				    	<div class="" style="margin-top: 15px;" v-if="fabuAreaRadio.length!=0">
				     		<p>CPU  剩余 {{fabuAreaRadio[choosedFbArea].cpuNum}}核分配     <el-input  v-model="form.cpuNum" style="width: 150px;"></el-input>核</p>
				     		<p>内存  剩余 {{fabuAreaRadio[choosedFbArea].memory}}G分配     <el-input  v-model="form.memory" style="width: 150px;"></el-input>G</p>
				     	</div>
				</el-form-item>
				
				
	<!--这里开始是secondForm2-->
				<el-form-item label="数据来源">
			    	<el-radio-group v-model="form.inServiceDataSource.type" @change="changeFBjiedian">
				      <el-radio-button class="box-radio" label="2">文件</el-radio-button>
				      <el-radio-button class="box-radio"  label="3">数据库</el-radio-button>
				    </el-radio-group>
    			</el-form-item>
    			
				<!--文件的form-->
				<wenjian-form 
					:resourceWeb= "resourceWeb"
					@outPutForm="wenjianOutPutFormSecondForm"
					:timeSubmit="wenJianTimeOutSecondForm"
					v-show="secondForm==='2'" 
					:inputOrOutput='laiyuan' ></wenjian-form>
				
				<!--数据库的form-->
    			<datadb-form  
    				@outPutForm="dbtadbOutPutFormSecondForm"
    				:timeSubmit="dbtadbTimeOutSecondForm"
    				:resourceWeb= "resourceWeb"
    				v-show="secondForm==='3'" 
    				:inputOrOutput='laiyuan'></datadb-form>
    			
    			
<!--***************这里开始是thirdForm******************************************************************-->
    			<el-form-item label="数据目的地" style="margin-top: 25px;">
			    	<el-radio-group v-model="form.outServiceDataSource.type" @change="changeDataMudi">
				      <el-radio-button class="box-radio" label="2">文件</el-radio-button>
				      <el-radio-button class="box-radio"  label="3">数据库</el-radio-button>
				    </el-radio-group>
    			</el-form-item>
    			
    			<!--文件的form-->
				<wenjian-form 
					:timeSubmit="wenJianTimeOutThirdForm"
					@outPutForm="wenjianOutPutFormThirdForm"
					:resourceWeb= "resourceWeb"
					v-show="thirdForm==='2'" 
					:inputOrOutput='mudi'></wenjian-form>
				
				<!--数据库的form-->
    			<datadb-form  
    				:timeSubmit="dbtadbTimeOutThirdForm"
					@outPutForm="dbtadbOutPutFormThirdForm"
					:resourceWeb= "resourceWeb"
    				v-show="thirdForm==='3'" 
    				:inputOrOutput='mudi'></datadb-form>
			</el-form>
			
			<p>
				  <el-button type="primary" @click="pushForm">提交</el-button>
				  <el-button type="primary" plain>取消</el-button>
			</p>
    </section>
</template>

<script>
    import yunxingPlane from "./components/yunxingPlane"
    import wenjianForm from "./components/collectWenjian"
    import datadbForm from "./components/collectDbdata"
     import ywInfoDescForm from "../common/yw_info_desc"
     import {
     	componentGetYwType,
     	componentServerRegisterGetFabuArea,
     	componentCollectFormPush
     } from "../common/js_css_img/serverResourceComputed"
    export default {
    	components:{
    		yunxingPlane,
    		wenjianForm,
    		datadbForm,
    		ywInfoDescForm
    	},
        data() {
          return {
          		dbtadbTimeOutSecondForm:false,/*第二个数据库表单*/
          		dbtadbTimeOutThirdForm:false,/*第三个数据库表单*/
          		wenJianTimeOutSecondForm:false,/*第二个文件表单*/
          		wenJianTimeOutThirdForm:false,/*第三个文件表单*/
          		yunxingPlaneTimeOut:false,
          		ywInfoDescTimeOut:false,
          		resourceWeb:0,/*选中的资源网段*/
          		choosedFbArea:0,
          		yewuType:[],
          		infoType:[],
          		fabuAreaRadio:[],
          		mudi:'mudi',
          		formLabel:[{options:[]}],
          		laiyuan:"laiyuan",
          		thirdForm:'',
          		secondForm:'',
          		showYunxingPlane:6,
          		form:{
					"name":""
					,"segmentId":'' 
					,"type":''
					,"businessType":""
					,"infoType":""
					,"describe": ""
					,"nodeIds":""
					,"isRestart":''
					,"smRunPlan":{}
					,"memory":''
					,"cpuNum":''
					,"inServiceDataSource":{ 
						"type":'' 
						,"connDatasourceId":'' 
					    ,"filePath":""
					    ,"fileName":"文件"
					    ,"sql":''
						,"outputDataFormList":[
							{
								"key":"1"
								,"name":"思密达" 
								,"metaDataId":1 
							}
						]
					}
					,"specifyFileType":'' 
					,"specifyValue":"" 
					,"gatherMode":''
					,"outFileType":""
					,"outServiceDataSource":
						{
							"type":''
							,"connDatasourceId":'' 
							,"fileSaveNameRule":"" 
							,"filePath":"" 
							,"fileName":"gg"
							,"inputDataFormList":[ 
								{
									"key":"sex" 
									,"name":"布鲁斯" 
									,"metaDataId":1
									,"position":1 
								}
								,{
									"key":"sexr"
									,"name":"布鲁斯"
									,"metaDataId":1
									,"position":1
								}
							]
						}
				},
          		collectServerFrom:{
          			cpu:"",
          			memory:"",
          			name:'',
          			fuwuType:'',
          			yewuType:[],
          			infoType:[],
          			desc:'',
          			yunxingPlane:'',
          			stratTime:"",
          			jiangeHours:"",
          			endTime:'',
          			yichang:'',
          			fbJieDian:'',
          		},
          		fuwuTypeFileButton:false,
          		yewuType:[
          			
          		],
          		infoType:[
          			
          		],
          		treeSeach:{
	          		segment:[],/*网段类型*/
	          		info_type:[],/*信息类型*/
	          		business_type:[],/*业务类型*/
	          	}
          };
        },
        methods: {
        		pushForm(){/*提交表单*/
//      			console.log(this.form);
					this.form.nodeIds = this.fabuAreaRadio[this.choosedFbArea].id;
        			this.ywInfoDescTimeOut=!this.ywInfoDescTimeOut;
        		},
        		upload(){
        			
        		},
        		changeYunxingPlane(val){
        			console.log(val)
        			this.showYunxingPlane = val;
        		},
        		changeFBjiedian(val){
        			this.secondForm = val;
        		},
        		upload(val){
        			document.getElementById(val).click();
        		},
        		changeDataMudi(val){
        			this.thirdForm = val;
        		},
        		changefbArea(val){/*选择发布区域*/
        			console.log(val);
        			this.choosedFbArea = val;
        		},
        		ywInfoDescOutPutForm(val){/*业务选择，信息选择，描述*/
        			console.log(val);
        			this.form.businessType =val.businessType.join();
        			this.form.infoType =val.infoType.join();
        			this.form.describe =val.describe;
        			this.yunxingPlaneTimeOut=!this.yunxingPlaneTimeOut;
        		},
        		yunxingPlaneOutPutForm(val){/*运行计划的表单*/
        			this.form.smRunPlan = val;
        			if(this.secondForm==='2'){
        				this.wenJianTimeOutSecondForm=!this.wenJianTimeOutSecondForm;
        			}else if (this.secondForm==='3'){
        				this.dbtadbTimeOutSecondForm = !this.dbtadbTimeOutSecondForm;
        			}
        			console.log(val);
        		},
        		dbtadbOutPutFormSecondForm(val){/*第二个数据库表单触发的事件*/
        			console.log(val);
        			this.form.inServiceDataSource = val;
        			    			
        			if(this.thirdForm==='2'){
        				this.wenJianTimeOutThirdForm=!this.wenJianTimeOutThirdForm;
        			}else if (this.thirdForm==='3'){
        				this.dbtadbTimeOutThirdForm = !this.dbtadbTimeOutThirdForm;
        			}
        		},
        		dbtadbOutPutFormThirdForm(val){/*/*第三个数据库表单触发的事件*/
        			console.log(val);
        			this.form.outServiceDataSource = val;
        			componentCollectFormPush(this);
        		},
        		wenjianOutPutFormSecondForm(val){/*第二个文件表单触发的事件*/
        			console.log(val);
        			this.form.specifyValue=val.secondForm.specifyValue;
        			this.form.gatherMode=val.secondForm.gatherMode;
        			this.form.specifyFileType=val.secondForm.specifyFileType;
        			this.form.inServiceDataSource = val.form;
        			
        			if(this.thirdForm==='2'){
        				this.wenJianTimeOutThirdForm=!this.wenJianTimeOutThirdForm;
        			}else if (this.thirdForm==='3'){
        				this.dbtadbTimeOutThirdForm = !this.dbtadbTimeOutThirdForm;
        			}
        		},
        		wenjianOutPutFormThirdForm(val){/*第三个文件表单触发的事件*/
        			console.log(val);
        			this.form.outFileType = val.secondForm.outFileType;
        			this.form.outServiceDataSource = val.form;
        			componentCollectFormPush(this);
        		},
        		getYwType(){/*获取三种类型的数据*/
	        		componentGetYwType(this,'');
	        	},
	        	chooseResource(val){/*选中资源网段*/
        			console.log(val);
        			this.resourceWeb = val;
        			componentServerRegisterGetFabuArea(this,val)
        		},
        },
        mounted(){
        	this.getYwType();
        }
  };
</script>

<style>
    .collect_server_from  .box_checkbox{
    	margin: 5px !important;
    }
    .collect_server_from  .box_checkbox .el-checkbox-button__inner{
    	border:  1px solid #dcdfe6;
    }
    
   .collect_server_from  .el-checkbox-button.is-checked .el-checkbox-button__inner{
	   	color: #fff;
	    background-color: #409eff;
	    border-color: #409eff;
	    box-shadow: -1px 0 0 0 #8cc5ff;
   }
   .collect_server_from .second_form {
    background: #f5f5f5;
    padding: 20px;
}
</style>